<template>
  <div>
    <new-search-bar :searchFixed="true" bgSearch="c-bg-white c-pv24-i" @search="startSearch" @cancel="startSearch"></new-search-bar>
    <div class="c-ph24">
      <div class="c-flex-row c-pv24 c-bd-b1" @click="clickTestItem(item.paperMainId)" v-for="(item,index) in testList" :key="index">
        <div class="c-ww180 c-hh120 c-text-hidden c-br16 c-p">
          <CoverImg coverSizeClass="c-w100 c-h c-text-hidden c-br16" imgClass="c-br16" :coverUrl="$addXossFilter(item.avatar, require('@/assets/defult270.png'))" />
          <vip-status :item="item"></vip-status>
        </div>
        <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-pv4 c-justify-sb">
          <div class="c-fs24 c-text-ellipsis2">{{item.name}}</div>
          <div class="c-flex-row c-aligni-center c-justify-sb">
            <div class="c-fc-xmlred c-fw600 c-fs22" v-if="item.payType == 1 || Number(item.price) == 0">免费</div>
            <div class="c-fc-xmlred c-fw600 c-fs26" v-else-if="item.payType == 2"><span v-if="Number(item.price) != 0" class="c-fs20">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 75, item.optimal, 'index')}}</div>
            <div class="c-fc-xmlred c-fw600 c-fs22" v-else-if="item.payType == 3">加密</div>
            <div class="c-fs20 c-fc-gray" v-if="item.payType == 2 && Number(item.price) != 0">{{!$isWxAppIos() ? '已售' : '已测'}}{{item.subscribers | formatNumber}}</div>
            <div class="c-fs20 c-fc-gray" v-else>已测{{item.hasTestNum | formatNumber}}</div>
          </div>
        </div>
      </div>
    </div>
    <loading-status-tem :showLoading="isLoading" :noMoreData="is_page == false && (testList && testList.length > 0)" :noData="!testList || testList.length == 0" :noDataText="'暂无结果'"></loading-status-tem>
    <nav-bottom-bar :itemIndex="16" v-if="showNavBottomBar"></nav-bottom-bar>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import newSearchBar from "@/components/templates/common/newSearchBar.vue";
import NavBottomBar from "@/components/templates/common/navBottomBar.vue";
import vipStatus from '@/components/templates/common/vipStatus.vue'
import CoverImg from '@/components/templates/common/coverImg.vue';
import { utilJs } from "@/utils/common.js"
export default {
  name: "MutuaTestList",
  components: {
    loadingStatusTem,
    NavBottomBar,
    newSearchBar,
    vipStatus,
    CoverImg
  },
  props: [],
  data() {
    return {
      distributionId: '',
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      themeName: localStorage.getItem("themeName") ? localStorage.getItem("themeName") : "mb5",
      testList: [],
      showNavBottomBar: false,
      is_page: false,
      page: 1,
      limit: 10,
      searchText: '',
      isLoading: false,
      companyAuth: localStorage.getItem("companyAuth") ? JSON.parse(localStorage.getItem("companyAuth")) : null,
    };
  },
  created() {
    utilJs.appShare(this);
  },
  activated() {
    this.isLoading = false;
    // this.page = 1;
    // this.searchText = '';
    // this.testList = [];
    this.distributionId = this.$route.query.distribution || '';
    // this.getMore(1);
    if (utilJs.checkNeedInitData(this.testList, this.page)) {
      this.initData()
    }
    this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
    this.isLoading = false;
    if (this.companyAuth.companyNav && this.companyAuth.companyNav.length > 0) {
      let arrMutuaFilter = this.companyAuth.companyNav.filter((item) => {
        return item.navType == 16;
      });
      this.showNavBottomBar = arrMutuaFilter.length > 0;
    }
    setDocumentTitle("互动测评列表");// eslint-disable-line
    window.addEventListener('scroll', this.windowScrollFunction);
    this.wechatShare();
  },
  deactivated() {
    // this.is_page = false;
    window.removeEventListener('scroll', this.windowScrollFunction);
  },
  mounted() {

  },
  methods: {
    initData() {
      this.page = 1;
      this.searchText = "";
      this.is_page = false;
      this.testList = [];
      this.getMore();
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    startSearch(e) {
      this.page = 1;
      this.testList = [];
      this.searchText = e.searchValue;
      this.getMore();
    },
    clickTestItem(testId) {
      let toPath = `/homePage/mutuaTest/mutuaTestDetail?mutuaTestId=${testId}`;
      this.iosAppRouteChange(toPath);
    },
    getMore() {
      if (!this.isLoading) {
        this.isLoading = true;
        let $this = this;
        utilJs.getMethod(global.apiurl + 'mutual/mutualList?searchName=' + this.searchText + '&page=' + this.page + '&limit=' + this.limit, function (res) {
          $this.isLoading = false;
          $this.testList = $this.testList.concat(res.data);
          $this.page = res.data && (res.data.length >= $this.limit) ? ($this.page + 1) : $this.page;//res.current_page < res.last_page ? ($this.page + 1) : $this.page;
          $this.is_page = res.data && (res.data.length >= $this.limit) ? true : false;//res.current_page < res.last_page ? true : false;
        }, failRes => {
          $this.isLoading = false;
        });
      }
    },
    //分享
    wechatShare: function () {
      let title = "互动测评列表";//window.localStorage.getItem("shareTitle");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      if (this.distributionId) {
        shareUrl = `${shareUrl}&distributionId=${this.distributionId}`;
      }
      utilJs.wechatConfig(shareUrl, title, "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let title = "互动测评列表";//window.localStorage.getItem("shareTitle");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      if (this.distributionId) {
        shareUrl = `${shareUrl}&distributionId=${this.distributionId}`;
      }
      utilJs.appShareTrue(title, "", shareUrl, "");
    },
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          that.getMore();
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
</style>
